<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .hours {
        color: red;
      }

      .minutes {
        color: green;
      }

      .seconds {
        color: blue;
      }

      .clock {
        border: 1px dashed black;
        padding: 5px;
        display: inline-block;
        background: yellow;
        position: absolute;
        left: 0;
        top: 0;
      }

      #tooltip {
        position: absolute;
        padding: 10px 20px;
        border: 1px solid #b3c9ce;
        border-radius: 4px;
        text-align: center;
        font: italic 14px/1.3 arial, sans-serif;
        color: #333;
        background: #fff;
        z-index: 100000;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
      }
    </style>
    <script src="hoverIntent.js"></script>
  </head>
  <body>
    <div id="elem" class="clock">
      <span class="hours">12</span> : <span class="minutes">30</span> :
      <span class="seconds">00</span>
    </div>

    <div id="tooltip" hidden>Tooltip</div>

    <script>
      setTimeout(() => {
        new HoverIntent({
          elem,
          over(e) {
            tooltip.style.left = elem.getBoundingClientRect().left + 5 + "px";
            tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + "px";
            tooltip.hidden = false;
          },
          out() {
            tooltip.hidden = true;
          },
        });
      }, 2e3);
    </script>
  </body>
</html>
